<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 工具栏组件 -->
      <el-row type="flex" justify="space-between">
        <div class="left">
          <el-button @click="addFn">添加房产</el-button>
        </div>
        <div class="right">
          <el-col :span="12">
            <!-- <span class="demonstration">click 激活</span> -->
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                全部分类<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
                <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </el-col>
          <el-col :span="12">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                全部经纪<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
                <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </el-col>
          <el-input placeholder="请输入关键字" />
          <el-button>筛选</el-button>
        </div>
      </el-row>
      <hr>
      <!-- 表格 -->
      <el-card>
        <el-table :data="houseList">
          <el-table-column label="封面" width="100px" prop="image">
            <template v-slot="{row}">
              <img
                v-imgerror="require('@/assets/common/fdc.png')"
                style="width:120px"
                :src="row.image"
                alt=""
              >
            </template>
          </el-table-column>
          <el-table-column label="标题" prop="title" />
          <el-table-column label="标签" prop="tags" width="140px">
            <!-- <template v-slot="{row}">
              {{ row.tags[0] }}
            </template> -->
          </el-table-column>
          <el-table-column label="地址" prop="address" />
          <el-table-column label="分类" prop="tags" />

          <el-table-column label="经纪" prop="agent">
            <!-- <template v-slot="{row}">
              {{ row.desc }}
            </template> -->
          </el-table-column>
          <el-table-column label="价格" prop="price" />
          <el-table-column label="介绍" prop="desc">
            <!-- <template v-slot="{row}">
              {{ row.desc }}

            </template> -->
          </el-table-column>

          <el-table-column label="图片" prop="photos">
            <template v-slot="{row}">
              <img
                v-imgerror="require('@/assets/common/fdc.png')"
                :src="row.photos"
                alt=""
                style="width:100px"
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template v-slot="{row}">
              <el-button type="text" @click="edit(row.id)">编辑</el-button>
              <el-button type="text" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            :page-size="size"
            layout="total, prev, pager, next"
            :total="50"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>
      <!-- showDialog -->
      <addHouse
        :show-dialog.sync="showDialog"
      />
    </div>
  </div>
</template>

<script>
import addHouse from './components/addHouse.vue'
import { getHouseList, delHouseList, getHouseCount, getHouseDetail } from '@/api/fangchan'
export default {
  components: { addHouse },
  data() {
    return {
      houseList: [],
      page: 0,
      size: 5,
      showDialog: false

    }
  },
  created() {
    this.getHouseList()
    this.getHouseCount()
  },
  methods: {

    async getHouseList() {
      const res = await getHouseList({
        page: 1,
        size: this.total
      })
      console.log(129, res)
      this.houseList = res.data
    },
    async getHouseCount() {
      const res = await getHouseCount({
        page: 1

      })
      console.log(138, res.data)
    },
    async getHouseDetail() {
      const res = await getHouseDetail({

      })
      console.log(155, res)
    },
    // 分页 页码发生改变时触发
    currentChange(page) {
      console.log(160, page)
      this.page = page
      // this.getHouseList()
    },
    addFn() {
      this.showDialog = true
    },
    delFn(id) {
      this.$confirm('是否确定删除？', '提示', {
        type: 'warning'
      }).then(async() => {
        // 调用接口
        await delHouseList(id)
        // 删除到最后一页的最后一条数据后会出现 页面没有数据的情况
        // 因此需要判断当删除最有一页的最后一条数据的时候，把页码减一
        // 再调用接口刷新列表
        if (this.houseList.length === 1 && this.page !== 1) {
          this.page--
        }
        // 更新列表
        this.getHouseList()
      }).catch(err => {
        console.log('取消：', err)
      })
    },
    edit() {}

  }

}

</script>

  <style lang="scss" scoped>
.right{
    display: flex;

}
.app-container{
    >.el-row{
        margin-bottom: 50px;
    }
}
.el-dropdown{
    border: 1px solid #dcdfe6;
    height: 40px;
    line-height: 40px;
    border-radius: 3px;
    margin-right: -16px;
}
.left{
    >.el-button{
        background-color: #409eff;
        color: #fff;
    }
}
  </style>

